<template>
  <div>
    <el-container>
      <el-header>
        <home-header @login="onlogin" @esc="onEsc"></home-header>
      </el-header>
      <el-main>
        <home-main></home-main>   
      </el-main>
      <el-footer>
        <home-footer :username="username"></home-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import HomeHeader from './home/HomeHeader'
  import HomeMain from './home/HomeMain'
  import HomeFooter from './home/HomeFooter'
  import {updateUserInfo} from "../util/common";
  
  export default {
    name: 'home',
    data(){
      return{
        username:'',
      }
    },
    components: { 
      HomeHeader,
      HomeMain,
      HomeFooter
    },
    methods:{
      onlogin(){
        this.username = localStorage.getItem('username')
      },
      onEsc(){
        this.username = ''
        localStorage.setItem('username','')
      }
    },
    mounted() {
        updateUserInfo();
        this.username = localStorage.getItem('username')
    }
  }
</script>

<style>

  
</style>
